<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>检验数据</span>
        </div>
      </template>
      
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="任务编号" prop="taskCode">
          <el-input
            v-model="queryParams.taskCode"
            placeholder="请输入任务编号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="请输入产品名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="批次号" prop="batchNo">
          <el-input
            v-model="queryParams.batchNo"
            placeholder="请输入批次号"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="参数名称" prop="paramName">
          <el-input
            v-model="queryParams.paramName"
            placeholder="请输入参数名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="是否合格" prop="isQualified">
          <el-select v-model="queryParams.isQualified" placeholder="请选择是否合格" clearable>
            <el-option label="合格" value="1" />
            <el-option label="不合格" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="检验日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['qep:inspection:data:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="dataList" border stripe>
        <el-table-column type="expand">
          <template #default="scope">
            <el-form label-position="left" inline class="detail-form">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="参数ID">
                    <span>{{ scope.row.paramId }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="责任人">
                    <span>{{ scope.row.responsiblePerson || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="处理结果">
                    <span>{{ scope.row.processResult || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="备注">
                    <span>{{ scope.row.remark || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="scope.row.defectImagePath">
                <el-col :span="24">
                  <el-form-item label="缺陷图片">
                    <el-image 
                      :src="scope.row.defectImagePath" 
                      :preview-src-list="[scope.row.defectImagePath]"
                      style="width: 120px; height: 120px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="scope.row.attachmentUrl">
                <el-col :span="24">
                  <el-form-item label="附件">
                    <el-link :href="scope.row.attachmentUrl" target="_blank" type="primary">
                      查看附件
                    </el-link>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="任务编号" align="center" prop="taskCode" min-width="110" />
        <el-table-column label="产品名称" align="center" prop="productName" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="批次号" align="center" prop="batchNo" min-width="110" />
        <el-table-column label="参数名称" align="center" prop="paramName" min-width="120" />
        <el-table-column label="标准值" align="center" prop="standardValue" min-width="110" />
        <el-table-column label="实测值" align="center" prop="measuredValue" min-width="110" />
        <el-table-column label="是否合格" align="center" prop="isQualified" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.isQualified === 1 ? 'success' : 'danger'">
              {{ scope.row.isQualified === 1 ? '合格' : '不合格' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="缺陷名称" align="center" prop="defectName" min-width="120" v-if="showDefectColumn" />
        <el-table-column label="责任人" align="center" prop="responsiblePerson" min-width="100" v-if="showResponsibleColumn" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="160">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
          <template #default="scope">
            <el-button 
              link type="primary" 
              icon="View" 
              @click="handleViewDetail(scope.row)"
              v-hasPermi="['qep:inspection:data:query']"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { parseTime } from '@/utils/ruoyi';
import { listInspectionData, exportInspectionData } from '@/api/qep/inspection/data';

const router = useRouter();

// 遮罩层
const loading = ref(false);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
// 检验数据表格数据
const dataList = ref([]);
// 日期范围
const dateRange = ref([]);

// 控制列显示
const showDefectColumn = computed(() => {
  return dataList.value.some(item => item.isQualified === 0 && item.defectName);
});

const showResponsibleColumn = computed(() => {
  return dataList.value.some(item => item.isQualified === 0 && item.responsiblePerson);
});

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  taskCode: undefined,
  productName: undefined,
  batchNo: undefined,
  paramName: undefined,
  isQualified: undefined
});

/** 查询检验数据列表 */
function getList() {
  loading.value = true;
  listInspectionData(queryParams).then(response => {
    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  queryParams.taskCode = undefined;
  queryParams.productName = undefined;
  queryParams.batchNo = undefined;
  queryParams.paramName = undefined;
  queryParams.isQualified = undefined;
  handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
  exportInspectionData(queryParams);
}

/** 查看详情按钮操作 */
function handleViewDetail(row) {
  router.push(`/inspection/data/detail/${row.id}`);
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-form {
  padding: 10px 20px;
}
</style> 